import React, { Component } from 'react'
import './index.css'
export default class Item extends Component {
	state = {
		mouse: false, //标识鼠标移入移出
	}
	//鼠标移入移出事件回调
	handle = (flag) => {
		return () => {
			this.setState({ mouse: flag })
		}
	}
	//鼠标勾选和取消勾选事件
	handleCheck = (id) => {
		return (event) => {
			this.props.updateTodo(id, event.target.checked)
		}
	}
	//删除一个todo
	handleDelete = (id) => {
		//判断是否确定删除
		if (window.confirm('确定删除当前数据嘛?')) {
			this.props.deleteTodo(id)
		}
	}
	render() {
		const { id, title, done } = this.props.todo
		const { mouse } = this.state
		return (
			<li
				style={{ backgroundColor: mouse ? '#ddd' : '' }}
				onMouseLeave={this.handle(false)}
				onMouseEnter={this.handle(true)}
			>
				<label>
					{/* defaultchecked 仅仅只在初始化的时候调用一次  
				     <input type="checkbox" defaultchecked={done}  onChange={this.handleCheck(id)}/>  */}
					<input
						type="checkbox"
						checked={done}
						onChange={this.handleCheck(id)}
					/>
					<span>{title}</span>
				</label>
				<button
					className="btn btn-danger"
					style={{ display: mouse ? 'block' : 'none' }}
					onClick={() => this.handleDelete(id)}
				>
					删除
				</button>
			</li>
		)
	}
}
